<template>
    <view class="max-box">
        <up-popup :show="show" :round="14" mode="bottom"  @close="close" @open="open">
            <view class="popup_box area">
                <!-- 标题 -->
                <view class="popup_title">{{ popupTitle }}</view>
                <!-- 搜索框 -->
                <!-- <view class="search_box">
                    <s-search-keyword :placeholder="'搜索项目'" @searchKeyWord="searchKeyWord"></s-search-keyword>
                </view> -->
                <!-- 列表标题 -->
                <view class="list_title">{{ listingName }}</view>
                <!-- 列表盒子 -->
                <view class="list_box" v-if="arrayList.length != 0">
                    <scroll-view @scrolltolower="PopupScrolltolower" scroll-y enhanced :show-scrollbar="false">
                        
                        <view class="times-list">
                            <view class="checkedNo"     
                            :class="{checkedYes: checkedArrey.indexOf(item) != -1}" 
                            v-for="(item, i) in arrayList" 
                            :key="i" 
                            @click="appointment(item,i)">
                                {{ item.title }}
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <!-- 缺醒图 -->
                <view class="unawakening_box" v-else>
                    <!-- :textColor="" -->
                    <up-empty :text="' '" :marginTop="61" :width="141" :height="141" :icon="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_img_nodate@2.png`">
                        <view class="accretion_box">
                            <text>暂无数据</text>
                            <text v-if="showGoLink">？</text>
                            <text v-if="showGoLink" class="accretion" @tap="SwitchAddPage">去添加</text>
                        </view>
                    </up-empty>
                </view>
            </view>
            
            <!-- 按钮集合盒子 -->
            <view>
                <view class="button_box">
                    <view class="button_item_box">
                        <view class="turn_over" @tap="close()">取消</view>
                    </view>
                    <view class="button_item_box">
                        <view class="new_client" @tap="selectProjectTitle">选择</view>
                    </view>
                </view>
                <view class="placeholder"></view>
            </view>
        </up-popup>
    </view>

</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
    const props = defineProps({
        // // 名称
        popupTitle:{
            type:String,
            default:''
        },
        // 列表标题
        listingName:{
            type:String,
            default:''
        },
        // 是否有新增
        showGoLink:{
            type:String,
            default:''
        },
        // 传过来的数组列表
        arrayList:{
            type:Array,
            default:[]
        },
        // 当前页
        current_page:{
            type:Number,
        },
        // 最后一页
        last_page:{
            type:Number,
        }
})


const checkedArrey = reactive([])
const appointment = (item,index)=> {
    const indexOfitem = checkedArrey.indexOf(item)
	if (indexOfitem  == -1) {
		checkedArrey.push(item); //选中添加到数组里
	} else {
		checkedArrey.splice(indexOfitem, 1); //取消
	}
}


    const current_page = ref()
    const last_page = ref()
    // 控制弹出层开关
    const show = ref(false)
    const selectProject = ref(0)
    // 加载更多组件 组件实例
    const loadmoreRef = ref()
    // 传给父组件的title 和 id
    const project_title = ref('')
    const project_id = ref()

    // 选择项目
    // const checkProject = (title,id) => {
    //     selectProject.value = id
    //     project_title.value = title
    //     project_id.value = id
    // }


    // 打开弹出层
    const open = () => {
        show.value = true
    }

    // 关闭弹出层
    const close = () => {
        show.value = false
    }

    // 搜索
    const searchKeyWord = (srarch_value) => {
        emits('subcomponentSearch',srarch_value)
    }

    // 选择项目
    const selectProjectTitle = () => {
        emits('selectedData',checkedArrey)
        close()
    }

    // 跳转添加数据页
    const SwitchAddPage = () => {
    }

    // 项目列表:分页
    const emits = defineEmits(['pageEvent','selectedData']);
    const PopupScrolltolower = () => {
        loadmoreRef.value.PopupScrolltolower()
        emits('pageEvent')
        current_page.value = props.current_page
        last_page.value = props.last_page
    };

    

    // 输入框的值
    // const srarch_value = ref('')

    // 点击搜索触发方法 传入输入框的值
    // const emits = defineEmits(['searchKeyWord']);
    // const search = () => {
    //     emits('searchKeyWord',srarch_value.value)
    // }

    // 暴露子组件属性或方法
    defineExpose({
        open,
        close,
    })

</script>

<style lang="scss" scoped>

    .area {
        margin: 0 40rpx;
    }

    // 内容盒子
    .popup_box {
        height: 45vh;
        // 标题
        .popup_title {
            margin: 30rpx 0;
            height: 56rpx;
            width: 100%;
            text-align: center;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 40rpx;
            font-style: normal;
            text-decoration: none;
        }
        // 搜索盒子
        .search_box {
            margin-bottom: 40rpx;
        }
        // 列表标题
        .list_title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
           font-size:$uni-font-size-26;
            font-style: normal;
            text-decoration: none;
            letter-spacing: 1px;
            margin-bottom: 20rpx;
            margin-left: 5rpx;
        }
        // 列表盒子
        .list_box {
            width: 100%;
            height: 70%;
            background-color: #ffffff;
            border-top: 2rpx solid #efefef;
            // 列表项
            .list_item {
                width: 100%;
                height: 80rpx;
                // background-color: skyblue;
                display: flex;
                align-items: center;
                // 列表项图片盒子
                .check_image {
                    width: 36rpx;
                    height: 36rpx;
                    margin-right: 20rpx;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
                // 项目名称
                .project_title {
                    width: 100%;
                    height: 100%;
                    font-family: PingFangSC;
                    color: $uni-text-color;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    line-height: 80rpx;
                }
            }
        }
    }


    // 按钮集合大盒子
    .button_box {
        background-color: #ffffff;
        display: flex;
        height: 128rpx;
        width: 100%;
        justify-content: space-between;
        .button_item_box {
            width: calc(50% - 60rpx);
            padding: 18rpx 30rpx 20rpx 30rpx;
                // 取消按钮
            .turn_over {
                width: 315rpx;
                height: 90rpx;
                border-radius: 45rpx;
                border: 2rpx solid $uni-color-primary;
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
                font-style: normal;
                text-decoration: none;
                text-align: center;
                line-height: 90rpx;
            }
            // 选择项目按钮
            .new_client {
                width: 315rpx;
                height: 92rpx;
                border-radius: 45rpx;
                background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
                font-family: PingFangSC;
                color: #FFFFFF;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
                font-style: normal;
                text-decoration: none;
                text-align: center;
                line-height: 92rpx;
            }
        }
    }

    // 占位盒子
    .placeholder {
        height: 32rpx;
        width: 100%;
        background-color: #ffffff;
    }

    // 缺醒图盒子
    .unawakening_box {
        border-top: 2rpx solid #efefef;
        // 插槽盒子
        .accretion_box {
            width: 100%;
            height: 35rpx;
            font-family: PingFangSC;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-sm;
            font-style: normal;
            text-decoration: none;
            text-align: center;
            line-height: 35rpx;
            color: #c0c4cc;
            .accretion {
                color: $uni-color-primary;
            }
        }
    }


    scroll-view {
        height: 100%;
    }
//多选按钮
.times-list{
	display: flex;justify-content: flex-start;flex-wrap: wrap;
}
.checkedNo{
   font-size:$uni-font-size-26;
	border-radius: 10rpx;
	border: 1rpx solid #D8D8D8;
	padding: 6rpx 30rpx;
    background: $uni-bg-color;
	margin:16rpx ;
	
}
.checkedYes{
    background-color: #007AFF;
	color: #FFFFFF;
   font-size:$uni-font-size-26;
}
</style>